<template>
  <div class="login-container">
    <el-card class="login-card">
      <div class="text-center relative">
        <h2>saas管理系统</h2>
      </div>
      <el-form
        ref="formRef"
        :model="ruleForm"
        :rules="rules"
        class="login-form"
      >
        <el-form-item prop="username">
          <div class="input-wrapper">
            <el-input
              ref="username"
              v-model="ruleForm.username"
              placeholder="用户名"
              name="username"
              size="large"
              class="h-[48px]"
              prefix-icon="User"
            />
          </div>
        </el-form-item>
        <el-form-item prop="password">
          <div class="input-wrapper">
            <el-input
              v-model="ruleForm.password"
              placeholder="密码"
              type="password"
              size="large"
              class="h-[48px] pr-2"
              prefix-icon="Lock"
              show-password
            />
          </div>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            size="large"
            style="width: 100%"
            @click.prevent="gotoLogin"
            >登录
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { reactive, toRefs, defineComponent, onMounted, inject } from "vue";
import { useUserStore } from "@/store";
import { useRouter } from "vue-router";
import enterpriseBgImg from "@/assets/img/login_bg.png";
import { login } from "@/api/user.js";
import "@/styles/login.scss";
export default defineComponent({
  components: {},
  setup() {
    // const baseConfirm = inject('$baseConfirm');
    const router = useRouter();
    const { afterLogin } = useUserStore();
    const state = reactive({
      enterpriseName: "",
      enterpriseBgImg: enterpriseBgImg,
      formRef: null,
      ruleForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
      tableData: [],
    });
    onMounted(() => {
      fetchData();
    });
    const fetchData = async () => {
      state.enterpriseName = "SaaS管理后台";
      // const { data:{enterpriseBgImg,enterpriseName} } = await base();
      // state.enterpriseName = enterpriseName;
      // if(enterpriseBgImg) state.enterpriseBgImg = enterpriseBgImg;
    };
    return {
      ...toRefs(state),
      fetchData,
      afterLogin,
      router,
    };
  },
  methods: {
    async gotoLogin() {
      this.formRef.validate(async (valid) => {
        if (valid) {
          const res = await login(this.ruleForm);
          await this.afterLogin(res);
          this.$router.push("/home");
        }
      });
    },
  },
});
</script>
<style lang="scss" scoped></style>
